@model Component1.Pages.Components.Container

<div>
    <p>
        Container `Model.Text` property: <span style="color:red;">@Model.Text</span>
    </p>
    <ul>
        <li>
            This is a component called <b>container.</b> It has one child component, <b>message</b>.</li>
        <li>
            <b>message</b> component has two properties, Text and Text2, and uses two instances of <b>inner-message</b>
            component.
        </li>
        <li>
            Each <b>inner-message</b> component receives data from Text1 and Text2 properties respectively.
        </li>
    </ul>
    <p>
        This button below will change the `Model.Text` property of this component to current UTC time.<br>
    </p>
    <button on:click="@(() => Model.Show(DateTime.UtcNow.ToString()))" class="btn btn-primary">Show Current
        Time</button>
    <div class="row mt-3">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <message text="@Model.Text" key="@Model.Text"></message>
                </div>
            </div>
        </div>
    </div>
</div>
